{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/fonts/font-awesome/font-awesome.css') }}" rel="stylesheet" type="text/css" media="all" />
    <style type="text/css">
    
		/*Unseen Column*/
		@media only screen and (max-width: 800px) {
		    #unseen table td:nth-child(2),
		    #unseen table th:nth-child(2) {display: none;}
		}
		
		@media only screen and (max-width: 640px) {
		    #unseen table td:nth-child(4),
		    #unseen table th:nth-child(4),
		    #unseen table td:nth-child(7),
		    #unseen table th:nth-child(7),
		    #unseen table td:nth-child(8),
		    #unseen table th:nth-child(8){display: none;}
		}
    
		@media (max-width: 480px) {
		    .hidden-phone {
		        display: none !important;
		    }
		}
		@media (max-width:320px) {
		    .hidden-phone {
		        display: none !important;
		    }
		}
    </style>
{% endblock %}

{% block javascripts %}
{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        
        <div id="unseen" class="row">
            <div class="col-lg-12">        
        		<h2>Hidden Column</h2>
				<table class="table table-bordered table-striped table-condensed">
				  <thead>
				    <tr>
				      <th>Code</th>
				      <th>Company</th>
				      <th class="numeric">Price</th>
				      <th class="numeric">Change</th>
				      <th class="numeric">Change %</th>
				      <th class="numeric">Open</th>
				      <th class="numeric">High</th>
				      <th class="numeric">Low</th>
				      <th class="numeric">Volume</th>
				    </tr>
				  </thead>
				  <tbody>
				    <tr>
				      <td>AAC</td>
				      <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
				      <td class="numeric">$1.38</td>
				      <td class="numeric">-0.01</td>
				      <td class="numeric">-0.36%</td>
				      <td class="numeric">$1.39</td>
				      <td class="numeric">$1.39</td>
				      <td class="numeric">$1.38</td>
				      <td class="numeric">9,395</td>
				    </tr>
				    <tr>
				      <td>AAD</td>
				      <td>ARDENT LEISURE GROUP</td>
				      <td class="numeric">$1.15</td>
				      <td class="numeric">  +0.02</td>
				      <td class="numeric">1.32%</td>
				      <td class="numeric">$1.14</td>
				      <td class="numeric">$1.15</td>
				      <td class="numeric">$1.13</td>
				      <td class="numeric">56,431</td>
				    </tr>
				    <tr>
				      <td>AAX</td>
				      <td>AUSENCO LIMITED</td>
				      <td class="numeric">$4.00</td>
				      <td class="numeric">-0.04</td>
				      <td class="numeric">-0.99%</td>
				      <td class="numeric">$4.01</td>
				      <td class="numeric">$4.05</td>
				      <td class="numeric">$4.00</td>
				      <td class="numeric">90,641</td>
				    </tr>
				    <tr>
				      <td>ABC</td>
				      <td>ADELAIDE BRIGHTON LIMITED</td>
				      <td class="numeric">$3.00</td>
				      <td class="numeric">  +0.06</td>
				      <td class="numeric">2.04%</td>
				      <td class="numeric">$2.98</td>
				      <td class="numeric">$3.00</td>
				      <td class="numeric">$2.96</td>
				      <td class="numeric">862,518</td>
				    </tr>
				    <tr>
				      <td>ABP</td>
				      <td>ABACUS PROPERTY GROUP</td>
				      <td class="numeric">$1.91</td>
				      <td class="numeric">0.00</td>
				      <td class="numeric">0.00%</td>
				      <td class="numeric">$1.92</td>
				      <td class="numeric">$1.93</td>
				      <td class="numeric">$1.90</td>
				      <td class="numeric">595,701</td>
				    </tr>
				    <tr>
				      <td>ABY</td>
				      <td>ADITYA BIRLA MINERALS LIMITED</td>
				      <td class="numeric">$0.77</td>
				      <td class="numeric">  +0.02</td>
				      <td class="numeric">2.00%</td>
				      <td class="numeric">$0.76</td>
				      <td class="numeric">$0.77</td>
				      <td class="numeric">$0.76</td>
				      <td class="numeric">54,567</td>
				    </tr>
				    <tr>
				      <td>ACR</td>
				      <td>ACRUX LIMITED</td>
				      <td class="numeric">$3.71</td>
				      <td class="numeric">  +0.01</td>
				      <td class="numeric">0.14%</td>
				      <td class="numeric">$3.70</td>
				      <td class="numeric">$3.72</td>
				      <td class="numeric">$3.68</td>
				      <td class="numeric">191,373</td>
				    </tr>
				    <tr>
				      <td>ADU</td>
				      <td>ADAMUS RESOURCES LIMITED</td>
				      <td class="numeric">$0.72</td>
				      <td class="numeric">0.00</td>
				      <td class="numeric">0.00%</td>
				      <td class="numeric">$0.73</td>
				      <td class="numeric">$0.74</td>
				      <td class="numeric">$0.72</td>
				      <td class="numeric">8,602,291</td>
				    </tr>
				    <tr>
				      <td>AGG</td>
				      <td>ANGLOGOLD ASHANTI LIMITED</td>
				      <td class="numeric">$7.81</td>
				      <td class="numeric">-0.22</td>
				      <td class="numeric">-2.74%</td>
				      <td class="numeric">$7.82</td>
				      <td class="numeric">$7.82</td>
				      <td class="numeric">$7.81</td>
				      <td class="numeric">148</td>
				    </tr>
				    <tr>
				      <td>AGK</td>
				      <td>AGL ENERGY LIMITED</td>
				      <td class="numeric">$13.82</td>
				      <td class="numeric">  +0.02</td>
				      <td class="numeric">0.14%</td>
				      <td class="numeric">$13.83</td>
				      <td class="numeric">$13.83</td>
				      <td class="numeric">$13.67</td>
				      <td class="numeric">846,403</td>
				    </tr>
				    <tr>
				      <td>AGO</td>
				      <td>ATLAS IRON LIMITED</td>
				      <td class="numeric">$3.17</td>
				      <td class="numeric">-0.02</td>
				      <td class="numeric">-0.47%</td>
				      <td class="numeric">$3.11</td>
				      <td class="numeric">$3.22</td>
				      <td class="numeric">$3.10</td>
				      <td class="numeric">5,416,303</td>
				    </tr>
				  </tbody>
				</table>

            </div>
        </div> 
    
        <div class="row">
            <div class="col-lg-12">
				<table class="table table-striped table-hover">
				    <thead>
					    <tr>
					      <th>
					        <i class="fa fa-bullhorn"></i>
					         Company
					      </th>
					      <th class="hidden-phone">
					        <i class="fa fa-question-circle"></i>
					         Descrition
					      </th>
					      <th>
					        <i class="fa fa-bookmark"></i>
					         Profit
					      </th>
					      <th>
					        <i class=" fa fa-edit"></i>
					         Status
					      </th>
					      <th></th>
					    </tr>
				    </thead>
				    <tbody>
					    <tr>
					      <td><a href="#">Company Ltd</a></td>
					      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
					      <td>12000.00$</td>
					      <td><span class="label label-info label-mini">Due</span></td>
					      <td>
					        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
					        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
					        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
					      </td>
					    </tr>
					    <tr>
					      <td><a href="#">Dashgum co</a></td>
					      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
					      <td>17900.00$ </td>
					      <td><span class="label label-warning label-mini">Due</span></td>
					      <td>
					        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
					        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
					        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
					      </td>
					    </tr>
					    <tr>
					      <td><a href="#">Another Co</a></td>
					      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
					      <td>14400.00$ </td>
					      <td><span class="label label-success label-mini">Paid</span></td>
					      <td>
					        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
					        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
					        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
					      </td>
					    </tr>
					    <tr>
					      <td><a href="#">Dashgum ext</a></td>
					      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
					      <td>22000.50$ </td>
					      <td><span class="label label-success label-mini">Paid</span></td>
					      <td>
					        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
					        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
					        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
					      </td>
					    </tr>
					    <tr>
					      <td><a href="#">Total Ltd</a></td>
					      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
					      <td>12120.00$ </td>
					      <td><span class="label label-warning label-mini">Due</span></td>
					      <td>
					        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
					        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
					        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
					      </td>
					    </tr>
				    </tbody>
				</table>
            </div>
        </div>
        
        <div class="row">
            <div class="col-lg-12">
                <h2>Hidden Column width Responsive</h2>
                <div class="table-responsive">
					<table class="table table-striped table-hover">
					    <thead>
						    <tr>
						      <th>
						        <i class="fa fa-bullhorn"></i>
						         Company
						      </th>
						      <th class="hidden-phone">
						        <i class="fa fa-question-circle"></i>
						         Descrition
						      </th>
						      <th>
						        <i class="fa fa-bookmark"></i>
						         Profit
						      </th>
						      <th>
						        <i class=" fa fa-edit"></i>
						         Status
						      </th>
						      <th></th>
						    </tr>
					    </thead>
					    <tbody>
						    <tr>
						      <td><a href="#">Company Ltd</a></td>
						      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
						      <td>12000.00$</td>
						      <td><span class="label label-info label-mini">Due</span></td>
						      <td>
						        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
						        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
						        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
						      </td>
						    </tr>
						    <tr>
						      <td><a href="#">Dashgum co</a></td>
						      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
						      <td>17900.00$ </td>
						      <td><span class="label label-warning label-mini">Due</span></td>
						      <td>
						        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
						        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
						        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
						      </td>
						    </tr>
						    <tr>
						      <td><a href="#">Another Co</a></td>
						      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
						      <td>14400.00$ </td>
						      <td><span class="label label-success label-mini">Paid</span></td>
						      <td>
						        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
						        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
						        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
						      </td>
						    </tr>
						    <tr>
						      <td><a href="#">Dashgum ext</a></td>
						      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
						      <td>22000.50$ </td>
						      <td><span class="label label-success label-mini">Paid</span></td>
						      <td>
						        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
						        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
						        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
						      </td>
						    </tr>
						    <tr>
						      <td><a href="#">Total Ltd</a></td>
						      <td class="hidden-phone">Lorem Ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
						      <td>12120.00$ </td>
						      <td><span class="label label-warning label-mini">Due</span></td>
						      <td>
						        <button class="btn btn-success btn-xs"><i class="fa fa-check"></i></button>
						        <button class="btn btn-primary btn-xs"><i class="fa fa-pencil"></i></button>
						        <button class="btn btn-danger btn-xs"><i class="fa fa-trash-o "></i></button>
						      </td>
						    </tr>
					    </tbody>
					</table>
				</div>
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}